<template>
	<view class="order-item">
		<view class="top" @click="goDetail(item.id)">
			<view class="img">
				<image :src="item.avatar"></image>
				<text class="level golden">{{prize}}</text>
			</view>
			<view class="infos">
				<view class="info">
					<text class="name">{{ item.username}}</text>
					<text class="price">￥{{ item.price }}</text>
				</view>
				<view class="star">
					<text class="iconfont icon-shoucang1" v-for="v in star"></text>
				</view>
			</view>
		</view>
		<view class="disc" @click="goDetail(item.id)">
			<text v-for="subItem in item.disc">{{ subItem }}</text>
		</view>
		<button type="primary" @click="goOrder(item)">立即预约</button>
	</view>
</template>

<script>
	export default {
		name:"OrderItem",
		props:{
			item:{
				type:Object,
				default:()=>{}
			}
		},
		data() {
			return {
				
			};
		},
		computed:{
			star(){
				return this.item.star
			},
			prize(){
				let lv = this.item.level
				// switch(lv){
				// 	case 0: 
				// 		''
				// 		break
				// 	case 1:
				// 		'金牌'
				// 		break
				// 	case 2:
				// 		'银牌'
				// 		break
					
				// }
				if(lv==1){
					return '金牌'
				}
				if(lv==2){
					return '银牌'
				}else{
					return ''
				}
			}
		},
		methods:{
			goOrder(){
				let params = JSON.stringify(this.item)
				console.log(this.item,'this.item',params)
				uni.navigateTo({
					url:'/subPackage/PreOrderInfo/PreOrderInfo?info='+params
				})
			},
			goDetail(id){
				console.log(id)
				uni.navigateTo({
					url:'/subPackage/PreOrderDetail/PreOrderDetail?id='+id
				})
			}
		}
	}
</script>

<style lang="scss">
.order-item{
	width: 340rpx;
	border: 1px solid #ccc;
	border-radius: 16rpx;
	margin: 20rpx 0;
	.top{
		display: flex;
		.img{
			position: relative;
			// border: 1px solid #000;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 10rpx;
			}
			.level{
				font-size: 22rpx;
				border-radius: 4rpx;
				padding: 4rpx;
				position: absolute;
				bottom: 0;
				right: 0;
				&.silver{
					background: #f5f5f5;
					color: #888;
				}
				&.golden{
					color: orange;
					background: gold;
				}
			}
			
		}
		.infos{
			width: 100%;
			// padding-left: 10rpx;
			.info{
				// display: inline-block;
				// border: 1px solid #000;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10rpx;
				padding-top: 6rpx;
				box-sizing: border-box;
				.name{
					font-weight: bold;
				}
				.price{
					color: orange;
					font-size: 28rpx;
				}
			}
			.star{
				padding-left: 10rpx;
			}
		}
	}
	.disc{
		margin: 20rpx;
		font-size: 28rpx;
		text{
			border: 1px solid #ccc;
			border-radius: 10rpx;
			padding: 4rpx 6rpx;
			margin: 0 6rpx;
		}
	}
	button{
		font-size: 28rpx;
		border-radius: 0 0 16rpx 16rpx;
	}
}
</style>